<template>
  <card>
    <template v-slot:title>支付笔数</template>
    <template v-slot:header_num>96566</template>

    <template v-slot:chart>
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div ref="echart" id="chart" style="width: 100%; height: 100%"></div>
    </template>

    <template v-slot:footer_text>转化率</template>
    <template v-slot:footer_num>65%</template>
  </card>
</template>


<script>
import Card from "./CardLayout";
import * as echarts from "echarts";

export default {
  components: {
    Card,
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var chartDom = this.$refs.echart;
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          show: false,
          type: "category",
          boundaryGap: false,
          data: [
            "6月2号",
            "6月3号",
            "6月4号",
            "6月5号",
            "6月6号",
            "6月7号",
            "6月8号",
          ],
        },
        yAxis: {
          show: false,
          type: "value",
        },

        series: [
          {
            type: "bar",
            color: "#5470c6",
            data: [120, 200, 120, 80, 70, 110, 130],
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
        tooltip: {},

        // layout test
        grid: {
          left: 20,
          top: 0,
          right: 20,
          bottom: 0,
        },
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
